<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<%-- <link rel="stylesheet" type="text/css" href="${ctxStatic }/newInterFace/css/dandelion.css"  media="screen" /> --%>
		<title>Insert title here</title>

		<style type="text/css">
			body {
				background: #F6F6FB;
				overflow:hidden;
			}
			
			.color {
				color: #3399CC;
				text-decoration: none;
			}
			/*链接设置*/
			
			.product_form {
				border: 1px solid #A2A2A2;
				width: 100%;
				height: 100%;
				border-collapse: collapse;
			}
			
			.product_form td {
				border: 1px solid #A2A2A2;
			}
			
			.pjxx .pjxx_xq table {
				height: 350px;
			}
			
			.tdcss {
				font-size: 22px;
				text-align: left;
				padding-left: 30px;
				font-family: "楷体";
				height: 60px;
			}
			
			.first_td {
				width: 15%;
			}
			
			.product_ms {
				border: none;
				resize: none;
				width: 99%;
				height: 100%;
				overflow: auto;
				background-attachment: fixed;
				background-repeat: no-repeat;
				background-color: #F6F6FB;
				font-size: 18px;
				font-family: '楷体';
				color: black;
			}
			
			.pjxx {
				border: 1px solid #E1E1E9;
				border-collapse: collapse;
			}
			
			.pjxx .pjxx_xq {
				border: 1px solid #E1E1E9;
				line-height: 30px;
				font-family: "楷体";
			}
			
			.pj_prop {
				text-align: right;
			}
			
			.product_name {
				padding-top: 20px;
				font-family: 楷体;
				font-weight: bold;
				font-size: 25px;
				text-align: center;
			}
			/*底部分页*/
			
			.button_ul li {
				display: inline-block;
			}
			
			.button_ul a {
				margin-left: 20px;
				padding: 0 8px 0 8px;
				font-weight: bold;
				background: #F6F6FB;
				color: #3399CC;
				font-family: '黑体';
			}
			
			.button_ul .this_page {
				background: #CACACA;
			}
			
			.color:visited {
				color: #35B0EE;
				text-decoration: none;
				font-weight: bold;
			}
			
			.color:hover {
				text-decoration: underline;
			}
			/*导航样式 开始*/
.top_div {
	background: #F6FAFB;
	position: fixed;
	border-bottom: 1px solid #AAAAAA;
	top: 0px;
}


.mianBao {
	display: inline-block;
}


.mianBao a {
	text-decoration: none;
	color: #AAAAAA;
}


.mianBao a:hover {
	cursor: pointer;
	text-decoration: underline;
}

/*导航样式结束*/

 

		</style>
		
	<script type="text/javascript" src="${ctxStatic }/jquery/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		
		function ajaxpage(type){
			
		  
		  var currentStr=$("#currentStr").val();
		  
		  var productId=$("#productId").val();
		  
		  $.ajax({
				type : "POST",
				url : "pageform",
				data : {
					"currentStr":currentStr,
					"type" :type,
					"productId":productId
				},
				datatype : "json",
				success : function(data) {
					
					
				$("#elementpage tr td").remove();
				 var elementList = data.list;
				  
		for(var i=0; i<elementList.length; i++ ){
					  
					  var htmlstr ="";  
					  
		
			 if(elementList[i].elemenetPicURL==null){
				 htmlstr = "<td class='pjxx_xq' style='width: 550px;' align='center'><table id='temp' style='450px'><tr align='center'><td colspan='2'><img height='120px;' alt='图片更新中。。。' src='${ctxStatic }/newInterFace/img/temp1.jpg' /></td></tr>"+
					"<tr ><td class='pj_prop'>备件代码：</td><td style='width: 60%'>"+elementList[i].code+"</td></tr>"+
					"<tr><td class='pj_prop'>实际库存/安全库存：</td><td style='width: 60%'>"+elementList[i].num+"/"+elementList[i].safeNum+"</td></tr>"+
					"<tr><td class='pj_prop'>备件属性：</td><td style='width: 60%'>"+elementList[i].attributes+"</td></tr>"+
					"<tr><td class='pj_prop'>备件描述：</td><td>"+elementList[i].content+"</td></tr>"+
					"<tr><td class='pj_prop'>存放仓库：</td><td>"+elementList[i].warehouse+"</td></tr></table></td>"; 
					
			 }else{		  
					 htmlstr = "<td class='pjxx_xq' style='width: 550px;' align='center'><table id='temp' style='450px'><tr align='center'><td colspan='2'><img height='120px;' alt='图片更新中。。。' src='"+elementList[i].elemenetPicURL+"'></img></td></tr>"+
					"<tr ><td class='pj_prop'>备件代码：</td><td style='width: 60%'>"+elementList[i].code+"</td></tr>"+
					"<tr><td class='pj_prop'>实际库存/安全库存：</td><td style='width: 60%'>"+elementList[i].num+"/"+elementList[i].safeNum+"</td></tr>"+
					"<tr><td class='pj_prop'>备件属性：</td><td style='width: 60%'>"+elementList[i].attributes+"</td></tr>"+
					"<tr><td class='pj_prop'>备件描述：</td><td>"+elementList[i].content+"</td></tr>"+
					"<tr><td class='pj_prop'>存放仓库：</td><td>"+elementList[i].warehouse+"</td></tr></table></td>"; 
					
			 }
					
			        $("#elementpage> tbody > tr").append(htmlstr);
		  }
		   var current =data.current;
		    $("#currentStr").val(current);
		    
		    
		    //ajax改变底部样式
		    $("#pagediv ul li").remove();
		    
		    var totalpage=data.tp;
		    
		    var htmlnubtop="<li><a class='color' href='#' onclick=ajaxpage"
			  	+"('startPage')"+">首页</a></li>"
			  	+"<li><a class='color' href='#' onclick=ajaxpage"
			  	+"('hasPrePage')>"+"上一页</a></li>";
			  	
			$("#pagediv ul").append(htmlnubtop);	
			
			var htmlnubbody="";
		    
 		     for(var i=1; i<=totalpage; i++){
		    	
 		    	 
		    	if(i==current){
		    		htmlnubbody="<li><a class='color this_page' class='color' href='#' onclick=ajaxpage"+"("+i+")>"+i+"</a></li>";
		    	}else{
		    		
		    		htmlnubbody="<li><a  class='color' href='#' onclick=ajaxpage"+"("+i+")>"+i+"</a></li>";
		    	}
		    	 
		    	$("#pagediv ul").append(htmlnubbody);
		     } 
          
		   var htmlnubbtn="<li><a class='color' href='#' onclick=ajaxpage"
			  	+"('hasNextPage')"+">下一页</a></li>"
			  	+"<li><a class='color' href='#' onclick=ajaxpage"
			  	+"('endPage')"+">末页</a></li>";
			  
			  	$("#pagediv ul").append(htmlnubbtn); 
		  
				},
				error : function(data) {
					alert('数据异常!');
				}
			}); 
	  }
		
		
	</script>
	
		

	</head>

	<body>

		<c:set var="bnasLength" value="${fn:length(bnas) }"></c:set>


	<!--面包屑导航-->
	<div class="top_div" style="width: 100%; color: #AAAAAA; height: 40px;">
		<c:forEach items="${sessionScope.bnas }" var="bna" varStatus="st">
			<div class="mianBao"  style="width: auto;">
				<p align="center">
					<c:choose>
						<c:when test="${st.index==0 }">
							<%-- <a href="${bna.url }?goback=${bnasLength-st.index}">${bna.label }</a> --%>
							<a href="../baseData/newinterface">首页</a>
						</c:when>
						<c:when test="${st.index==bnasLength-1 }">
							<a href="javascript:">${bna.label }</a>
						</c:when>
						<c:otherwise>
							<c:choose>
								<c:when test="${fn:contains(bna.url,'?')}">
									<a href="${bna.url }&goback=${bnasLength-st.index}">${bna.label }</a>
								</c:when>
								<c:otherwise>
									<a href="${bna.url }?goback=${bnasLength-st.index}">${bna.label }</a>
								</c:otherwise>
							</c:choose>
						</c:otherwise>
					</c:choose>
				</p>
			</div>
			<c:if test="${st.index!=bnasLength-1 }">
			>>>
			</c:if>
		</c:forEach>
	</div>

		<!-- LOGO -->
		<div style="width: 100%; margin-top: 50px;">
			<a href="../baseData/newinterface"><img style="vertical-align: middle;" width="270px;" alt="LOGO" src="${ctxStatic }/newInterFace/img/LOGO1.png"></a>
			<div id="" style="display: inline-block; width: 860px; margin: 0 auto">
				<font style="margin-left: 500px; letter-spacing: 20px; font-size: 40px; font-family: '宋体';" color="#EE7700">产品配件展示</font>
			</div>
		</div>

		<!-- 产品表单 -->
		<div style="height: 380px; margin-top: 30px;">
			<table class="product_form" style="" cellspacing="0">
				<tr height="15%">
					<td rowspan="3" align="center" style="width: 10%;">
						<table>
							<tr>
								<td style="border: none;">
									<c:if test="${empty sfProduct.productPicURL }">
										<img src="${ctxStatic }/newInterFace/img/temp1.png" style="height:300px" >
									</c:if>
									<c:if test="${not empty sfProduct.productPicURL }">
										<img src="${sfProduct.productPicURL }" style="height:300px">
									</c:if>
								</td>
							</tr>
							<tr align="center">
								<td style="border: none;" class="product_name">${sfProduct.code }</td>
							</tr>
						</table>
					</td>
					<td class="tdcss first_td">产品状态</td>
					<td class="tdcss first_td">${sfProduct.status}</td>
					<td class="tdcss first_td">产品描述</td>
				</tr>
				<tr align="" height="15%">
					<td class="tdcss">产品年代</td>
					<td class="tdcss">${sfProduct.age}</td>
					<td class="tdcss" rowspan="2" style="width: 50%;">
						<textarea disabled="disabled" class="product_ms">${sfProduct.productDescription}</textarea>
					</td>

				</tr>
				<tr align="center" height="15%">
					<td class="tdcss">累计发货量</td>
					<td class="tdcss">${sfProduct.shipMentCount }</td>
				</tr>
			</table>
		</div>

		<div style="width: 100%;">
			<div style="width: 100%; height: 50px; background-color: #F6FAFB;">
				<p style="line-height: 50px;">
					<font style="color: #9F9F9F; font-size: 20px; font-family: '华文中宋';">产品配件说明：${sfProduct.elementDescription}</font>
				</p>

			</div>
			<!-- 配件信息 -->
			<table id="elementpage" border="1" align="center" class="pjxx">
				
					<tr>
						<c:forEach items="${list}" var="element">
							<td class="pjxx_xq" style="width: 550px;" align="center">
								<table  width="450px;">
								
										<tr align="center">
											<td colspan="2">
												<c:if test="${empty element.elemenetPicURL }">
													<img height="120px;" alt="图片更新中。。。" src="${ctxStatic }/newInterFace/img/temp1.jpg" />
												</c:if>
												<c:if test="${not empty element.elemenetPicURL }">
													<img height="120px;" alt="图片更新中。。。" src="${element.elemenetPicURL}" />
												</c:if>
											</td>
										</tr>
										<tr>
											<td class="pj_prop">备件代码：</td>
											<td style="width: 60%">${element.code}</td>
										</tr>
										<tr>
											<td class="pj_prop">实际库存/安全库存：</td>
											<td style="width: 60%">${element.num}/${element.safeNum}</td>
										</tr>
										<tr>
											<td class="pj_prop">备件属性：</td>
											<td style="width: 60%">${element.attributes}</td>
										</tr>
										<tr>
											<td class="pj_prop">备件描述：</td>
											<td>${element.content}</td>
										</tr>
										<tr>
											<td class="pj_prop">存放仓库：</td>
											<td>${element.warehouse}</td>
										</tr>
									
								</table>
							</td>
						</c:forEach>
					</tr>
			</table>

			<!-- 底部操作 -->
			<br />
			<input type="hidden" value="1" id="currentStr" >
			
			<input type="hidden" value="${sfProduct.id}" id="productId" >
			
			<div id="pagediv" style="float: left;position: relative;width:100%;" align="center">
				   <ul class="button_ul" style="list-style: none;position: relative;">
					<li>
						<a class="color" href="#" onclick="ajaxpage('startPage')"   >首页</a>
					</li>
					<li>
						<a class="color" href="#" onclick="ajaxpage('hasPrePage')" >上一页</a>
					</li>
 
                  <c:forEach varStatus="st" begin="1" step="1" end="${tp}">
						<c:if test="${st.index==current}">
							<li>
								<a class="color this_page" class="color" onclick="ajaxpage('${st.index }')"  >${st.index }</a>
							</li>
						</c:if>
						<c:if test="${st.index!=current}">
							<li>
								<a class="color" onclick="ajaxpage('${st.index }')">${st.index }</a>
							</li>
						</c:if>
					</c:forEach>
 
					<li>
						<a class="color"  href="#" onclick="ajaxpage('hasNextPage')">下一页</a>
					</li>
					<li>
						<a class="color" href="#" onclick="ajaxpage('endPage')">末页</a>
					</li>
				</ul>
			</div>
	</body>

</html>